window.addEventListener('load', function () {

    navTab('.tab-li', '.activiesItem');
    /**
        * tab切换
        * @param {*} liS  导航中所有的li 
        * @param {*} itemS 所有的模块
        */
    function navTab(liS, itemS) {
        //获取导航中所有的li
        var leftNav = document.querySelectorAll(liS);
        //获取所有的模块
        var items = document.querySelectorAll(itemS);
        // console.log(items);

        //循环li让选中的展示
        for (var i = 0; i < leftNav.length; i++) {
            leftNav[i].onclick = function () {
                // console.log(this.dataset.name);
                for (var j = 0; j < items.length; j++) {
                    leftNav[j].classList.remove('active');
                    items[j].classList.remove('show');
                }
                var itemShow = document.querySelector(`.${this.dataset.name}`);
                itemShow.classList.add('show');
                this.classList.add('active');
            }
        }
    }


    //获取数据
    activeShow();
    function activeShow() {
        var currentPage = 1;
        var maxPage = null;
        getDate();
        function getDate() {
            if (window.XMLHttpRequest) {
                var xhr = new XMLHttpRequest();
            }
            xhr.open('get', 'http://localhost:3000/activies', false);
            // xhr.open('get','http://localhost:3000/activies?_page=1&_limit=6',false);
            xhr.send();
            if (xhr.status == 200 && xhr.readyState == 4) {
                var data = JSON.parse(xhr.responseText);
                maxPage = Math.ceil(data.length / 6);
                // console.log(maxPage);

                var addPage = document.querySelector('.icon-xiangyou1');
                var removePage = document.querySelector('.icon-xiangzuo1');
                addPage.onclick = function () {
                    // console.log(11);
                    if (currentPage >= maxPage) {
                        currentPage = maxPage;
                    } else {
                        currentPage++;
                    }
                    // console.log(currentPage);
                    show(currentPage);
                    numShow();

                }
                removePage.onclick = function () {
                    // console.log(11);
                    if (currentPage <= 1) {
                        currentPage = 1;
                    } else {
                        currentPage--;
                    }
                    // console.log(currentPage);
                    show(currentPage);
                    numShow();
                }
            }
        }

        //分页展示
        show(currentPage);
        function show(currentPage) {
            if (window.XMLHttpRequest) {
                var xhr = new XMLHttpRequest();
            }
            xhr.open('get', `http://localhost:3000/activies?_page=${currentPage}&_limit=6`, false);
            xhr.send();
            if (xhr.status == 200 && xhr.readyState == 4) {
                var data = JSON.parse(xhr.responseText);
                // console.log(data);
                var showBox = document.querySelector('.activieshow');
                // console.log(showBox);
                var str = '';
                for (var i = 0; i < data.length; i++) {
                    str += `<div class="itemActity">
                    <div class="imgItem">
                        <img src="${data[i].img}" alt="">
                    </div>
                    <div class="title">
                        <div class="tag">NEW</div>
                        <div class="acti-name">${data[i].name}</div>
                        <div class="end">已结束</div>
                    </div>
                </div>`;
                }
                // console.log(str);
                showBox.innerHTML = str;
            }
        }

        //向页面添加页码
        numShow();
        function numShow() {
            // console.log(currentPage);
            var pageNumbox = document.querySelector('.pagination-content');
            //添加页码
            var str = '';
            for (var i = 0; i < maxPage; i++) {
                str += `<span class="pagination-page">${i + 1}</span>`;
            }
            pageNumbox.innerHTML = str;
            //获取每一个页码
            var pagenumS = document.querySelectorAll('.pagination-page');
            for (var i = 0; i < pagenumS.length; i++) {
                pagenumS[i].classList.remove('is-active');
            }
            pagenumS[currentPage - 1].classList.add('is-active');


        }

    }
})

